import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/page/home/convenient/repair/repair_home_controller.dart';
import 'package:kkhousekeep/widget/custom_button.dart';

import '../../../../widget/custom_app_bar.dart';
import 'repair_details_controller.dart';

class RepairDetailsPage extends StatelessWidget {
  const RepairDetailsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/home_bg.png"),
          fit: BoxFit.fill,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: CustomAppBar("报修详情", backgroundColor: Colors.transparent),
        body: GetBuilder(
          init: RepairDetailsController(),
          builder: (controller) => _builderBodyWidget(controller),
        ),
      ),
    );
  }

  Widget _builderBodyWidget(RepairDetailsController controller) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 32.w),
      margin: EdgeInsets.only(top: 32.h),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          _builderDetailsWidget(controller),
          Obx(() => Visibility(
                visible:
                    controller.progressState.value != ProgressState.completed,
                child: Container(
                  margin: EdgeInsets.only(bottom: 102.h),
                  child: CustomButton(
                    isAsh: false,
                    onPressed: () => controller.performClickButton(),
                    text: controller.progressState.value ==
                            ProgressState.processing
                        ? '联系工人'
                        : '取消申请',
                  ),
                ),
              )),
        ],
      ),
    );
  }

  Widget _builderDetailsWidget(RepairDetailsController controller) {
    return Container(
      padding: EdgeInsets.only(left: 48.w, bottom: 72.h),
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage(
            "assets/images/home_convenient_repair_details_bg.png",
          ),
          fit: BoxFit.fill,
        ),
      ),
      child: Column(
        children: [
          Obx(() => _builderDetailsTopWidget(controller)),
          _builderDetailsContentWidget(controller),
          _builderDetailsBottomWidget(controller),
        ],
      ),
    );
  }

  Widget _builderDetailsTopWidget(RepairDetailsController controller) {
    String repairState = controller.progressState.value.name;
    String iconName = controller.progressState.value.iconName;
    return SizedBox(
      height: 206.h,
      child: Stack(
        children: [
          Positioned(
              left: 0,
              top: 52.h,
              child: Text(
                repairState,
                style: TextStyle(
                  fontSize: 40.sp,
                  color: const Color(0XFF333333),
                  fontWeight: FontWeight.bold,
                ),
              )),
          Positioned(
              left: 0,
              bottom: 50.h,
              child: Text(
                '完成时间  ${controller.orderTime.value}',
                style: TextStyle(
                  fontSize: 24.sp,
                  color: const Color(0XFFCECECE),
                ),
              )),
          Positioned(
              right: 0,
              top: 4.h,
              width: 220.w,
              height: 204.h,
              child: Image.asset(
                'assets/images/$iconName',
                fit: BoxFit.fill,
              )),
        ],
      ),
    );
  }

  Widget _builderDetailsContentWidget(RepairDetailsController controller) {
    var labelStyle = TextStyle(color: const Color(0XFF999999), fontSize: 32.sp);
    var valueStyle = TextStyle(color: const Color(0XFF333333), fontSize: 32.sp);
    return Container(
      padding: EdgeInsets.only(top: 74.h),
      height: 546.h,
      child: Stack(
        children: [
          Positioned(
            left: 200.w,
            top: 0,
            child: Obx(() => Text(
                  controller.worker.value,
                  style: valueStyle,
                )),
          ),
          Positioned(
            left: 200.w,
            top: 68.h,
            child: Obx(() => Text(
                  controller.repairType.value,
                  style: valueStyle,
                )),
          ),
          Positioned(
            left: 200.w,
            top: 136.h,
            child: Obx(() => Text(
                  controller.address.value,
                  style: valueStyle,
                )),
          ),
          Positioned(
            left: 200.w,
            top: 200.h,
            child: Obx(() => Text(
                  controller.repairApplicant.value,
                  style: valueStyle,
                )),
          ),
          Positioned(
            left: 200.w,
            top: 268.h,
            child: Obx(() => Text(
                  controller.phone.value,
                  style: valueStyle,
                )),
          ),
          Positioned(
            left: 200.w,
            top: 336.h,
            child: Obx(() => Text(
                  controller.urgency.value,
                  style: valueStyle,
                )),
          ),
          Positioned(
            left: 200.w,
            top: 404.h,
            child: Obx(() => Text(
                  controller.fatalType.value,
                  style: valueStyle,
                )),
          ),

          ///label Text
          Positioned(
            left: 0,
            top: 0,
            child: Text(
              '接单工人',
              style: labelStyle,
            ),
          ),
          Positioned(
            left: 0,
            top: 68.h,
            child: Text(
              '报修区域',
              style: labelStyle,
            ),
          ),
          Positioned(
            left: 0,
            top: 136.h,
            child: Text(
              '报修地址',
              style: labelStyle,
            ),
          ),
          Positioned(
            left: 0,
            top: 200.h,
            child: Text(
              '报修人',
              style: labelStyle,
            ),
          ),
          Positioned(
            left: 0,
            top: 268.h,
            child: Text(
              '电话',
              style: labelStyle,
            ),
          ),
          Positioned(
            left: 0,
            top: 336.h,
            child: Text(
              '紧急程度',
              style: labelStyle,
            ),
          ),
          Positioned(
            left: 0,
            top: 404.h,
            child: Text(
              '故障类型',
              style: labelStyle,
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              height: 2.h,
              color: const Color(0XFFF0F2F7),
            ),
          ),
        ],
      ),
    );
  }

  Widget _builderDetailsBottomWidget(RepairDetailsController controller) {
    return Container(
      padding: EdgeInsets.only(top: 26.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('故障描述',
              style: TextStyle(
                fontSize: 32.sp,
                color: const Color(0XFF999999),
              )),
          Obx(() => Container(
                padding: EdgeInsets.only(top: 24.h, bottom: 16.h),
                child: Text(controller.faultDesc.value,
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 32.sp,
                      color: const Color(0XFF333333),
                    )),
              )),
          Obx(() => SizedBox(
                height: 180.w,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: controller.pics.length,
                  itemBuilder: (context, index) {
                    double leftMargin = index == 0 ? 0 : 15.w;
                    double rightMargin = index == 3 ? 0 : 15.w;
                    String path = controller.pics[index];

                    return InkWell(
                      onTap: () => controller.performClickImageItem(path),
                      child: Container(
                        width: 180.w,
                        height: 180.w,
                        margin: EdgeInsets.only(
                            left: leftMargin, right: rightMargin),
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: NetworkImage(path),
                            fit: BoxFit.fill,
                          ),
                          borderRadius: BorderRadius.circular(6.w),
                        ),
                      ),
                    );
                  },
                ),
              )),
        ],
      ),
    );
  }
}
